<template>
	<view class="goodsDetail">
		<view class="top_banner">
			<view class="top_bg">
				<u-image src="/static/tabbar/hd_bg.png" width="100%" height="687rpx"></u-image>
			</view>
			<view class="top_hd_info">
				<view class="hd_title">{{hdInfo.title}}</view>
				<view class="hd_date">活动时间</view>
				<view class="hd_date">{{hdInfo.start_time}}-{{hdInfo.end_time}}</view>
			</view>
			<view class="hd_rule_btn" @click="showIntro">
				
			</view>
			<view class="hd_share_btn" @click="showShare">
				分享
			</view>
			<view class="hd_intro" v-if="introShow">
				<rich-text :nodes="hdInfo.intro"></rich-text>
			</view>
		</view>
		
			<view>
				<image src="/static/image/enter.png" class="product-title" mode="heightFix"></image>
			</view>
			
			<view class="hd_rule_sta" v-if="hdInfo.stainfo[5]==3">
				<view class="has_close_tips">
					<view class="tit_center">活动已经结束</view>
				</view>
			</view>
			<view class="hd_rule_sta" v-if="hdInfo.stainfo[5]==1">
				<view class="has_noopen_tips">
					<view class="tit_center">未开始</view>
					<view class="tips_center">
						<text>活动即将开启，敬请期待</text>
					</view>
				</view>
			</view>
			<view class="hd_goods">
				<view class="hd_goods_item" v-for="(item, index) in hdGoods" @click="jumpPage(item.goods_id)">
					<view class="hd_goods_thumb"><u-lazy-load threshold="-350" :image="item.goods_image" :index="index"></u-lazy-load></view>
					<view class="hd_goods_info">
						<view class="hd_goods_tit">{{item.goods_name}}</view>
						<text v-if="item.q_id == '1'">¥{{item.goods_min_price}}</text>
						<text v-if="item.q_id == '2'">¥{{item.goods_min_price}}+{{item.goods_min_point}}券</text>
						<text v-if="item.q_id == '3'">¥{{item.goods_min_price}}</text>
					</view>				
				</view>
			</view>
		
			<view class="main">
				<view>
					<image src="/static/image/detail.png" mode="heightFix" class="detail-image"></image>
				</view>
				<view class="hd_rule">
					<u-parse :html="htmlNode"></u-parse>
				</view>
			</view>
			<view class="footer">本活动最终解释权归平台所有</view>
		
		
		
<!-- 		

		<view class="hd_content">
			<u-parse :html="htmlNode"></u-parse>
		</view>
		 -->
		
		<u-popup v-model="showModel" mode="center" width="675rpx" height="1120rpx" :border-radius="20">
			<view class="myextension">
				<view class="loading">
					<u-loading mode="circle" size="60"></u-loading>
					<view class="loading-text">海报加载中</view>
				</view>
				<block class="mycanvas">
					<image class="imgs" style="width:675rpx; height: 1080rpx;z-index: 1000;" :src="imgUrl" mode="aspectFill"></image>
				</block>
				<!-- #ifdef APP-PLUS -->
				<view class="saveImg" @tap="saveImg" style="background:#20cbd4;z-index: 2000;">保存海报</view>
				<view class="saveImg1" @tap="changeCode" style="background:#20cbd4">{{btnMsg}}</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button v-if="album" class="saveImg" type='primary' open-type="openSetting">去授权</button>
				<view class="saveImg" @tap="saveImg" style="background:#20cbd4;z-index: 2000;">保存海报</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<p class="tips">长按图片进行保存</p>
				<!-- #endif -->
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<login-model ref="loginModel"></login-model>
		<u-modal v-model="modelShow" title="授权提醒" content="还未授权微信支付,是否授权？" @confirm="authorization" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {getTxInfo,isLogin,shtxBanner} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel
		},
		data() {
			return { 
				album:false,
				introShow:false,
				modelShow:false,
				avatarList:[],
				isEmpty:false,
				emptyImg:getApp().globalData.imageUrl+"empty_goods.png",
				emptyTxt:"暂无评价信息～",
				hdInfo:{},
				extra:{},
				hdGoods:[],
				file_url:"",//规格中图片
				price:0,//规格中的价格
				stock:999,//规格中的库存
				point:0,//规格中的券(优选区)
				htmlNode:"",//商品详情
				commentList:[],//评论列表
				goodsDetailInfo:{},
				footerList:[],
				tabsList: [{
					name: '活动详情'
				}],
				current: 0,
				customStyle:{
					color:"#20cbd4",
					border:"5rpx #20cbd4",
					marginBottom:"10rpx"
				},
				confrimStyle:{
					color:"#f5fdfe",
					border:"5rpx #20cbd4",
					background:"#20cbd4",
					marginBottom:"10rpx"
				},
				showPopup:false,
				popupType:1,
				popNumber:1,
				skuList:[],
				ids:"",//规格选中的ids
				goodsNorms:"",//规格选中的名称
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				showModel:false,
				imgUrl:"", //分享图片
				show:false,
				btnType:0,
				btnMsg:"转为小程序码"
			}
		},
		onLoad(option) {
			// #ifdef MP
			this.btnType=1;
			// #endif
			console.log('option',option);
			uni.setNavigationBarColor({  
			    frontColor: '#010101',  
			    backgroundColor: '#99d7d2' 
			})
			//海报识别
			if(option.scene){
				let scene = decodeURIComponent(option.scene)
				if(scene.indexOf('&')>0){
					let qs = scene.split('&')
					let query = []
					qs.forEach((value)=>{
						console.log(value)
						let kv = value.split('=')
						query[kv[0]] = kv[1]
					})
					if(query['hdid']){
						option.hdid = query['hdid']
					}
					if(query['spread_code']){
						option.spread_code = query['spread_code']
					}
				}
			}
			this.getHdInfo(option.hdid);
			if(option.spread_code){
				uni.setStorageSync('spread_code', option.spread_code);
			}			
		},
		onHide() {
			this.album=false
		},
		methods: {
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			jumpPage(id){
				uni.navigateTo({
				  url: '/goods/goodsDetail?goods_id='+id
				});
			},
			showIntro(){
				let introShow=this.introShow;
				this.introShow=!introShow;
			},
			showShare(){
				//分享
				isLogin(this,{type:3});
				shtxBanner(this,{hdid:this.hdInfo.id,type:this.btnType})
			},
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			getHdInfo(hdid){
				console.log('getTxInfo',hdid);
				getTxInfo(this,{'id':hdid});
			},
			setFrom(html) {
				//处理富文本 让图片居中适应
				let newContent = html.replace(/\<img/gi, '<img class="rich-img" ');
				this.htmlNode = newContent
			},
			clickImg(index){
			},
			saveImg(url,that){
				uni.downloadFile({
					url:url,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: '保存成功',
									icon: 'success', 
									icon: true
								});
							}
						});
					}
				});
			},
			clickCoupon(){
				uni.navigateTo({
				  url: '/goods/coupon'
				});
			},
			change(index) {
				this.current = index;
				if(index == 1){
					this.pageStart = 1;
					this.commentList = [];
					this.selectCommentList();
				}
			},
			iconClick(index){
				if(index==0){
					uni.switchTab({
						url:"/pages/tabBar/home"
					})
				}else if(index==2){
					//分享
					isLogin(this,{type:3});
					shtxBanner(this,{hdid:this.hdInfo.id,type:this.btnType})
				}
			},
			changeCode(){
				this.imgUrl=""
				if(this.btnType == 0){
					this.btnType = 1
					this.btnMsg = "转为二维码"
				}else{
					this.btnType = 0
					this.btnMsg = "转为小程序码"
				}
				shtxBanner(this,{hdid:this.hdInfo.id,type:this.btnType})
			},
			//收藏
			saveCollection(){
				collect(this,{goods_id:this.goodsInfo.goods_id,category:this.goodsInfo.category_id,q_id:this.goodsInfo.q_id});
			},
			authorization(){
				uni.navigateTo({
					url:"/pages/views/authorization?state="+this.goodsInfo.goods_id,
					success() {
						this.$u.toast("未授权微信公众号支付，请点击授权")
					}
				})
			},
			//index:1=加入购物车；2=立即购买/立即秒杀/单独购买；3=选择规格；4=我要开团
			showGoodsPopup(index){
				// #ifdef H5
					let ua = window.navigator.userAgent.toLowerCase()
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						if(uni.getStorageSync("openidGzh")==null||uni.getStorageSync("openidGzh")==""){
							this.modelShow=true
						}
					}
				// #endif
				isLogin(this,{type:2});
				this.popupType=index;
				if(this.goodsInfo.spec_type == 1){
					if(this.goodsInfo.q_id == 1){
						this.price = this.goodsInfo.goods_sku.goods_price;//规格中的价格
					}else if(this.goodsInfo.q_id == 2){
						this.price = this.goodsInfo.goods_sku.price;//规格中的价格
						this.point = this.goodsInfo.goods_sku.points;//规格中的券(优选区)
					}
					this.stock = this.goodsInfo.goods_sku.stock_num;//规格中的库存
					this.ids = this.goodsInfo.goods_sku.spec_sku_id;
				}
			},
			normChange(groupIdx,redioIdx,redioName){
				this.skuList[groupIdx].title=redioName;
				this.skuList[groupIdx].spec_items[redioIdx].is_check=true;
				for(var i=0;i<this.skuList[groupIdx].spec_items.length;i++){
					if(this.skuList[groupIdx].title!=this.skuList[groupIdx].spec_items[i].spec_value){
						this.skuList[groupIdx].spec_items[i].is_check=false;
					}
				}
				this.changePrice();
			},
			//处理价格
			changePrice(){
				var that = this;
				var flag = true;
				//如果存在规格未选中的值，直接返回
				for (var i in that.skuList) {
					if (that.skuList[i].title == '') {
						flag = false;
						return; //如果数组里有为空的值，那直接返回true
					}
				}
				if(flag){
					//把选中的id放在数组中
					var ids = [];
					var goodsNorms = [];
					for (var i in that.skuList) {
						for (var j in that.skuList[i].spec_items) {
							if(that.skuList[i].spec_items[j].is_check == true){
								ids.push(that.skuList[i].spec_items[j].item_id)
								goodsNorms.push(that.skuList[i].spec_items[j].spec_value)
							}
						}
					}
					
					that.goodsNorms = goodsNorms;
					//把逗号变为下划线
					var id = ids.toString().replace(",","_");
					that.ids = id;
					var spec_list = that.goodsInfo.goods_multi_spec.spec_list;
					for(var m in spec_list){
						if(spec_list[m].spec_sku_id == id){
							if(that.goodsInfo.q_id == '1'){
								that.price = spec_list[m].form.goods_price;
							}else if(that.goodsInfo.q_id == '2'){
								that.price = spec_list[m].form.price;
								that.point = spec_list[m].form.point;
							}
							that.stock = spec_list[m].form.stock_num;
						}
					}
				}
			},
			confrimClick(){
				if(this.goodsInfo.spec_type == 2){
					for(var i=0;i<this.skuList.length;i++){
						if(this.skuList[i].title==''){
							this.$refs.uToast.show({title: '请选择'+this.skuList[i].group_name+'规格'});
							return;
						}
					}
				}
				this.showPopup=false;
				if(this.popNumber>this.stock){
					this.$refs.uToast.show({title: '库存不足'});
					return;
				}
				if(this.popupType==1){
					addCart(this,{type:1,goods_id:this.goodsInfo.goods_id,goods_sku_id:this.ids,goods_num:this.popNumber,updateType:0});
				}else if(this.popupType==2){
					var obj={};
					obj.goods_id=this.goodsInfo.goods_id;
					obj.goods_sku_id=this.ids;
					obj.goods_num=this.popNumber;
					obj.price=this.price;
					obj.type=0;
					uni.navigateTo({
					  url: '/goods/confrimOrder?param='+JSON.stringify(obj)
					});
				}else if(this.popupType==3){
					console.log("选择规格,数量为"+this.popNumber)
				}
			},
			saveImg() {
				//保存图片
				uni.showLoading({
					title: '保存中...'
				});
				let _this = this;
				// #ifdef MP
				uni.getSetting({
					success(res) {
						console.log(_this.imgUrl)
						uni.getImageInfo({
							src:_this.imgUrl,
							success(res) {
								var path=res.path;
								uni.saveImageToPhotosAlbum({
									filePath: path,
									success(re) {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功',
											icon: 'success'
										});
									},
									fail(err) {
										_this.album=true
										console.log(JSON.stringify(err))
										uni.showToast({
											title: '未授权',
											icon: 'none'
										});
									}
												
								});
							},
						})
					}
				});
				// #endif
				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.saveImageToPhotosAlbum({
						filePath: this.imgUrl,
						success(re) {
							uni.hideLoading();
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail(err) {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
									
					});
				}, 1000);
				// #endif
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #99d7d2;
	}
	.top_banner{
		width:656rpx;height: 687rpx;margin:30rpx auto;position: relative;
	}
	.hd_goods{width:656rpx;min-height:0;overflow: hidden;margin:0 auto;padding-bottom: 10rpx;}
	.hd_goods_item{position: relative;min-height:100rpx;overflow: hidden;padding:15rpx;margin-bottom:20rpx;background:#fff;border-radius: 6rpx;}
	.hd_goods_thumb{position: absolute;left:15rpx;top:15rpx;background:#ddd;height:100rpx;width:100rpx;}
	.hd_goods_info{margin-left:115rpx;min-height:100rpx;}
	.hd_goods_info .hd_goods_tit{font-size:28rpx;line-height:30rpx;padding-bottom: 10rpx;}
	.hd_goods_info text{line-height:30rpx;font-weight: bold;color:#fa3534;}
	.top_bg{width:100%;height:687rpx;position: absolute;top:0;right:0;right:0;z-index: 1;}
	.top_hd_info{position: absolute;z-index: 2;top:80rpx;left:40rpx;right:40rpx;bottom:0;text-align: center;}
	.top_hd_info .hd_title{line-height: 70rpx;font-size:36rpx;color:#FF3F00;font-weight: bold;}
	.top_hd_info .hd_date{font-size:28rpx;line-height:46rpx;color: #999;}
	.hd_rule_btn{position: absolute;width:126rpx;height: 40rpx;z-index: 3;left:44rpx;top:11rpx}
	.hd_share_btn{position: absolute;width:550rpx;height: 92rpx;z-index: 4;left:50%;bottom:82rpx;margin-left:-275rpx;text-align: center;line-height: 90rpx;color: #FFFFFF;}
	.hd_intro{position: absolute;left:44rpx;right:44rpx;top:56rpx;padding:20rpx;background:rgba(0,0,0,0.5);color:#fff;line-height: 50rpx;font-size:28rpx;min-height: 0;overflow: hidden;z-index: 5;border-radius: 6rpx;}
	.hd_content{width:656rpx;min-height: 0;overflow: hidden;margin:0 auto;background-color: #fff;padding:20rpx;border-radius: 20rpx;width:656rpx;min-height: 0;overflow: hidden;margin-bottom: 30rpx;}
	.hd_rule_sta{width:656rpx;min-height: 0;overflow: hidden;margin:0 auto;background-color: #fff;padding:20rpx;border-radius: 20rpx;width:656rpx;min-height: 0;overflow: hidden;margin-bottom: 30rpx;}
	
	.pintuan_info{margin:80rpx 20rpx 20rpx 20rpx;background:#FFF;min-height: 400rpx;border-radius: 20rpx;}
	.pintuan_top01{
		text-align: center;height:80rpx;padding:70rpx 0 14rpx 0;color:#EB4343;font-size:40rpx;font-weight: bold;
	}
	.tit_center{font-size:40rpx;line-height: 70rpx;color:#333;text-align: center;}
	.tips_center{font-size: 28rpx;line-height: 50rpx;text-align: center;color:#999}
	.pintuan_top01 text{font-size:60rpx;padding:0 10rpx}
	.pintuan_tips{
		width:200rpx;height:100rpx;background:url('/static/tabbar/pin_tips.png') no-repeat center center;
		background-size: 100% auto;
		margin:0 auto;
		text-align: center;
	}
	.pintuan_tips text{font-size: 24rpx;color:#fff;display: inline-block;height:50rpx;line-height:50rpx;margin-top:24rpx}
	.pin_line_bar{width:520rpx;height:30rpx;background:#E5E5E5;border-radius: 30rpx;margin:0 auto;}
	.pin_line_inner{
		height:30rpx;float:left;
		border-radius: 30rpx;
		background-color: rgb(237,111,76);
		background-image: inear-gradient( 90deg, rgb(243,179,62) 0%, rgb(237,111,76) 100%);
		background-image: -moz-linear-gradient( 90deg, rgb(243,179,62) 0%, rgb(237,111,76) 100%);
		background-image: -webkit-linear-gradient( 90deg, rgb(243,179,62) 0%, rgb(237,111,76) 100%);
		background-image: -ms-linear-gradient( 90deg, rgb(243,179,62) 0%, rgb(237,111,76) 100%);
	}
	
	
	
	.detailImg{
		height: 600rpx;
	}
	.price_box{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
	}
	.price_txt{
		display: flex;
	}
	.price_txt view{
		font-size: 25rpx;
		margin-right: 20rpx;
	}
	.price_txt text{
		margin: 0 10rpx;
		font-size: 40rpx;
		font-size: 600;
	}
	.u_price{
		text-decoration: line-through;
		line-height: 70rpx;
	}
	.goods_info{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
	}
	.goods_tit{
		font-size: 30rpx;
		margin-bottom: 15rpx;
	}
	.goods_remark{
		color: #0e595d;
	}
	.norms{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}
	.norms view{
		display: flex;
		align-items: center;
	}
	.norms view image{
		width: 40rpx;
		height: 40rpx; 
		margin-right: 5rpx;
		margin-left: 10rpx; 
	}
	.commentItem{
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.userInfo{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.userInfo text{
		margin-left: 20rpx;
		color: #909399;
	}
	.reply{
		background-color: #f6f6f6;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.allBtn{
		text-align: center;
	}
	.goodsInfoPop{
		display: flex;
		padding: 20rpx 30rpx;
	}
	.goodsInfoPop image{
		width: 150rpx;
		height: 150rpx;
	}
	.infoRight{
		margin-left: 10rpx;
		width: 530rpx;
	}
	.pricebox_pop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #909399;
	}
	.pricePop{
		font-size: 40rpx;
		color: #FA3534;
	}
	.norm_item{
		padding: 20rpx 30rpx;
	}
	.confrim-btn{
		padding: 0 50rpx;
	} 
	.pop_num{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pintuanBtn{
		line-height: 36rpx;
		padding: 0 30rpx;
		border-radius: 36rpx;
		color: #ffffff;
		text-align: center;
	}
	.commentImg{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.commentImg image{
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
	}
	.model_box{
		padding: 20rpx;
	}
	.model_title{
		font-size: 30rpx;
		font-weight: 700;
		padding: 0 0 10rpx;
	}
	.model_item{
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border-bottom:1rpx solid #e4e7ed;
	}
	.model_remark{
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #909399;
	}
</style>
<style lang="scss" scoped>
.navigation {
	display: flex;
	margin-top: 100rpx;
	background-color: #ffffff;
	padding: 16rpx 16rpx;
	width: 750rpx;
	position: fixed;
	bottom: 0;
	z-index: 10;
	justify-content: space-between;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
			text-align: center;
		}
		.cart {
			background: linear-gradient(90deg,#676869,#525252);
			margin-right: 30rpx;
		}
		.buy {
			background: linear-gradient(90deg,#13797f,#20cbd4);
		}
		.seckill {
			background: linear-gradient(93deg,#d01325,#ed3c30);
			width: 350rpx;
		}
	}
}
.myextension {
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.myextension image {
		display: block;
	}

	.saveImg {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		box-shadow: 0 10rpx 10rpx #ddd;
		background-color: #20cbd4;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 880rpx;
		bottom: 10rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.saveImg1 {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		box-shadow: 0 10rpx 10rpx #ddd;
		background-color: #20cbd4;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		top: 900rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.mycanvas {
		margin: 0 auto;
		transform: translateY(30upx);
		border-radius: 10upx;
		overflow: hidden;
	}

	.imgs {
		position: absolute;
		top: 30upx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10upx;
		overflow: hidden;
	}
	.tips{
		text-align: center;
		color: #999;
		font-size: 24upx;
		margin-top: 1100upx;
	}
	
	.main{
		background-color: #99d7d2;
		.free-user{
			.bg{
				background-color: #00dfdf;
				width: 700rpx;
				height: 260rpx;
				border-radius: 30rpx;
				margin: 0 25rpx;
			}
			.user-wrap{
				width: 673rpx;
				height: 400rpx;
				border-radius: 30rpx;
				margin: -200rpx 38rpx 0 38rpx;
				background-color: #FFFFFF;
				padding-top: 20rpx;
			}
			.swiper{
				height: 360rpx;
			}
			.user-item{
				display: flex;
				align-items: center;
				padding: 27rpx 10rpx;
				margin: 0 10rpx;
				border-bottom: 2rpx solid #f8f8f8;
				.avatar{
					width: 66rpx;
					height: 66rpx;
					margin-right: 20rpx;
				}
				.cont{
					flex: 1;
					.nickname{
						font-size: 26rpx;
						color: #c91717;
						line-height: 36rpx;
					}
					.txt{
						color: #6d6d6d;
						font-size: 20rpx;
					}
				}
				.create-time{
					font-size: 20rpx;
					color: #bcc0c9;
				}
			}
		}
	
		.product{
			width: 700rpx;
			height: 460rpx;
			background-color: #FFFFFF;
			margin: 30rpx 25rpx 0 25rpx;
		}
		
		.hd_rule{
			margin: 0rpx 25rpx 0 25rpx;
			width: 700rpx;
			height: 800rpx;
			background-color: #FFFFFF;
		}
	}
	.footer{
		background-color: #99d7d2;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #2b3536;
		font-size: 30rpx;
		height: 140rpx;
	}
	.product-title{
		 height: 60rpx; 
		 width: auto; 
		 margin: 50rpx auto; 
		 display:block;
	}
	.detail-image{
		 height: 60rpx; 
		 width: auto;
		 display: block; 
		 margin: 50rpx auto;
	}
	.loading{
		text-align: center;
		margin-top: 500rpx;
		.loading-text{
			font-size: 24rpx;
			color: #676869;
			margin-top: 20rpx;
		}
	}
</style>
